<template>
	<view>
		
		<view style="width: 18vmax;height: 18vmax;flex-direction: column;" >
			<view style="width: 100%;height: 50%;" class=" flex-center">
				<view
					style="width: 50%;height: 100%;border-radius: 100%;overflow: hidden;border: 3vmin solid #000000;transform: scale(0.8); ">
					<u-image src="/static/images/learn.png" mode="aspectFit"
						style="height: 100%;width: 100%;"></u-image>
				</view>
			</view>
		
			<view style="margin-top: 2vmin;font-size: 4vmin;" class="flex-center">{{audioSrc[audioIndex].name}}</view>
			<view style="margin-top: 1vmin;font-size: 3vmin;color: #909399;" class="flex-center">{{audioSrc[audioIndex].author}}
			</view>
			<view style="width: 100%;height: 1vmin;position: relative;top: -3vmin;">
				<slider @change="SliderChangedEvent" @changing="SliderChangedEvent" :value="sliderValue" block-size="2vmin" style=""></slider>
			</view>
			<view style="width: 100%;height:fit-content;justify-content: space-around;"
				class=" flex-center">
				<view style="height: 2.5vmax;width:2.5vmax ;" >
					<u-icon name="skip-back-left" size="2.5vmax" @click="OnClickBack()" ></u-icon>
				</view>
				<view style="height: 2.5vmax;width:2.5vmax ;">
					<u-icon v-if="isPlay" name="pause" size="2.5vmax" @click="OnClickPause()" ></u-icon>
					<u-icon v-else name="play-right" size="2.5vmax" @click="OnClickPlay()"></u-icon>
				</view>
				<view style="height: 2.5vmax;width:2.5vmax ;">
					<u-icon name="skip-forward-right" size="2.5vmax" @click="OnClickNext()"></u-icon>
				</view>
			</view>
		</view>
						
	</view>
</template>

<script>
	export default {
		name:"audio-card",
		data() {
			return {
				audioSrc:[{
					name:'扎着马尾的少女',
					author:'账号已注销',
					src:'/static/audios/audio.mp3'
				},{
					name:"Collapsing World",
					author:'Lightscape',
					src:'/static/audios/Collapsing World.mp3'
				},{
					name:'搁浅',
					author:'周杰伦',
					src:'/static/audios/GeQian.mp3'
				}],
				audioIndex:0,
				audioContext:null,
				isPlay:false,
				mapping:{
					audioLength:0,
					lineProgessLength:100,
					ratio:0
				},
				sliderValue:0
			};
		},
		methods:{
			OnClickNext(){
				this.audioIndex = this.audioIndex>=this.audioSrc.length-1?0:this.audioIndex +1;
			},
			OnClickBack(){
				this.audioIndex = this.audioIndex<=0?this.audioSrc.length-1:this.audioIndex -1;
			},
			OnClickPlay(){
				if(this.audioContext == null){
					this.audioContext = uni.createInnerAudioContext();
					this.audioContext.onTimeUpdate(() => {
						this.sliderValue = this.audioContext.currentTime * this.mapping.ratio;
					})
					let tempAudio = this.audioSrc[this.audioIndex];
					this.audioContext.src = tempAudio.src;
					
					this.audioContext.onCanplay(e =>{
						this.mapping.audioLength = this.audioContext.duration;
						this.mapping.ratio = 100/this.audioContext.duration;
						
					})
					this.audioContext.onPlay(e =>{
						this.isPlay = true;
					})
					this.audioContext.onPause(e =>{
						this.isPlay = false;
					})
					this.audioContext.onStop(e=>{
						this.sliderValue = 0;
						this.isPlay = false;
					})
					this.audioContext.onEnded(e =>{
						this.OnClickNext();
					})
				}
				this.audioContext.play()
			},
			OnClickPause(){
				if(this.isPlay == true && this.audioContext != null){
					this.audioContext.pause()
				}
			},
			SliderChangedEvent(e){
				// console.log(e);
				if(this.audioContext == null){
					this.sliderValue = 0;
					return;
				}
				// console.log(e.detail.value/this.mapping.ratio)
				this.audioContext.seek(e.detail.value/this.mapping.ratio)
				// this.audioContext.seek(e.detail.value/)
				
			}
		},
		watch:{
			audioIndex:function(newVal,oldVal){
				// console.log(newVal);
				if(this.audioContext != null){
					this.audioContext.pause();
					this.audioContext.destroy();
					this.audioContext = null;
					this.isPlay = false;
				}
				
				this.OnClickPlay();
				
				
			}
		},
		destroyed() {
			this.audioContext.pause()
			this.audioContext.destroy();
			this.audioContext = null;
		}
	}
</script>

<style>

</style>
